<template>
	<view class="pages">
		<view class="card1">
			<view>标题:</view>
			<input class="input1" placeholder="请输入活动标题" @input="getInputContent1"/>
		</view>
		
		<view  class="card2">
			<view>内容:</view>
			<textarea class="input2" placeholder="请输入活动内容"  @input="getInputContent2"></textarea>
		</view>
		
		<view  class="card4">
			<view>选择活动开始结束时间:</view>
			<button class="button"  @click="changeData">选择日期范围</button>
			<wu-calendar mode="range" :date="date" ref="calendar" @confirm="calendarConfirm" :insert="false"></wu-calendar>
		</view>
		
		<view></view>
		
		<view  class="card3">图片/视频:</view>
		<view>
			<l-upload @complete="upload" @remove="Remove" limit="1"
			 style="position: absolute; top: 338px; left: 80px;"></l-upload>
		</view>
		<navigator class="btn" @click="release">发布</navigator>

				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: [],
				time:'',
				endTime:'',
				title:'',
				content:'',
				img:'',
				
				// 通过登录信息获取的
				publisher:"",
				telephone:'',
			}
		},
		methods: {
			changeData(){
				this.$refs.calendar.open();
			},
			calendarConfirm(e) {
				console.log(e.range.before);
				console.log(e.range.after);
				this.time = e.range.before;
				this.endTime = e.range.after;
				this.date = [e.range.before,e.range.after]
			},
			getInputContent1(e){
				console.log(e.target.value);
				this.title = e.target.value;
			},
			getInputContent2(e){
				console.log(e.target.value);
				this.content = e.target.value;
			},
			// 上传回调函数。   
			upload(resp) {
				console.log(resp.imageArr.join())
				this.img = resp.imageArr.join()
			},
			// 图片移除回调
			Remove(resp){
				console.log(resp.imageArr)
			},
			// 发布活动
			release(){
				uni.showModal({
				        title: '确认操作',
				        content: '确定要将发布此活动吗？',
				        success: (res) => {
				          if (res.confirm) {
				            // 用户点击确定,获取该活动id,并向服务器发送请求将该活动删除
				            // 获取token
				            var token = uni.getStorageSync('Token');
				            // 从登录信息中获取店铺名称和电话号
				            var publisher = uni.getStorageSync('UserInfo').name;
							var telephone = uni.getStorageSync('UserInfo').mobile;
				            // 获取页面中输入的内容赋值给各个参数
				            var title = this.title
							var content = this.content
							var time = this.time
							var endTime = this.endTime
							var img = this.img
							if(title && content && time && endTime && img){
								uni.request({
									 url: `http://localhost:7001/ruoyi-system/buying`,
									    method: 'POST',
										data:{
											'title' : title ,
											'content' : content,
											'time' : time,
											'endTime' : endTime,
											'img' : img,
											'publisher': publisher,
											'telephone':telephone
										},
									    header: {
									        'Authorization': 'Bearer ' + token
									    },
									success: (res) => {
										if (res.statusCode === 200) {
											console.log("res...............................");
											console.log(res);  
											// 成功之后,跳转到活动页面
											uni.navigateTo({
											        url: '/pages/activity/activity' // 这里填写您想要跳转到的页面路径
											    });
										} else {
											reject(`Failed to fetch details. Status code: ${res.statusCode}`);
										}
									},
									fail: (err) => {
										reject(`Request failed: ${err.errMsg}`);
									}
								});
							}else {
								  // 至少有一个字段为空，可以在这里处理空值的情况
								  uni.showToast({
									title: '请确保所有字段都已填写',
									icon: 'none',
									duration: 2000
								  });
								}
				          } else if (res.cancel) {
				            // 用户点击取消
				            console.log('用户点击取消');
				          }
				        }
				      });
			}
			
		}
	}
</script>

<style>
	.pages{
		width: 375px;
		height: 812px;
		background-color: rgba(255,255,255,1);
	}
	.card1{
		
		display: flex;
	}
	.card1 view:nth-child(1){
		margin-left: 32px;
		margin-top: 22px;
		width: 42px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.input1 {
		margin-top: 18px;
		margin-left: 8px;
		width: 260px;
		height: 30px;
		background-color: rgba(255,255,255,1);
		border: 1px solid rgba(187,187,187,1);
	}
	
	.card2{
		margin-top: 15px;
		display: flex;
	}
	.card2 view:nth-child(1){
		margin-left: 32px;
		width: 42px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.input2 {
		margin-top: 8px;
		margin-left: 8px;
		width: 260px;
		height: 125px;
		background-color: rgba(255,255,255,1);
		color: rgba(136,136,136,1);
		font-size: 14px;
		font-family: Microsoft Yahei;
		border: 1px solid rgba(187,187,187,1);
		vertical-align: top;
	}
	
	.card3{
		margin-left: 36px;
		margin-top: 15px;
		top: 264px;
		width: 77px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.btn{
		position: absolute;
		left: 74px;
		top: 549px;
		width: 242px;
		height: 37px;
		line-height: 37px;
		border-radius: 4px;
		background-color: rgba(29,111,255,1);
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
	}
	.button{
		width: 242px;
		height: 37px;
		line-height: 37px;
		border-radius: 4px;
		margin-top: 10px;
	}
	.card4{
		margin-top: 15px;
	}
	.card4 view:nth-child(1){
		margin-left: 32px;
	}
</style>
